<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>用户信用档案记录</title>

    <link href="../plugin/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../plugin/bootstrap-table-1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../plugin/sweetalert-6.6.2/sweetalert2.min.css" rel="stylesheet"/>
    <link href="../plugin/bootstrap-3.3.7/plugin/file_input/fileinput.min.css" rel="stylesheet"/>
    <link href="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <link href="../plugin/jquery-zoomify/zoomify.min.css" rel="stylesheet"/>

    <script src="../plugin/jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/file_input/fileinput.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/file_input/local_zh.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../plugin/bootstrap-table-1.11.1/bootstrap-table.min.js"></script>
    <script src="../plugin/bootstrap-table-1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="../plugin/sweetalert-6.6.2/sweetalert2.min.js"></script>
    <script src="../plugin/jquery-3.2.1/jquery.formautofill.min.js"></script>
    <script src="../plugin/jquery-3.2.1/jquery.serializejson.js"></script>
    <script src="../plugin/wangEditor-3.0.15/wangEditor.min.js"></script>
    <script src="../plugin/jquery-zoomify/zoomify.min.js"></script>
    <script src="../plugin/soul/utils3.js"></script>
    <script src='../base/base.js'></script>

</head>
<body class="childrenBody">
<div style="margin:10px 5px 0;" class="panel panel-default">
    <div style="padding-bottom: 0px;" class="panel-body">
        <!-- 选项卡菜单-->
        <ul idx="" id="voucher_submited_tab" class="nav nav-tabs" role="tablist">
            <li class="active" idx="0"><a href="#a" role="tab" data-toggle="tab">逾期未还</a></li>
            <li idx="1"><a href="#b" role="tab" data-toggle="tab">逾期还款</a></li>
            <li idx="2"><a href="#c" role="tab" data-toggle="tab">迟还款</a></li>
            <li idx="3"><a href="#d" role="tab" data-toggle="tab">提前还款</a></li>
            <li idx="4"><a href="#e" role="tab" data-toggle="tab">准时还款</a></li>
        </ul>
        <!-- 选项卡面板 -->
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane in active" id="a">
                <!--逾期未还表格-->
                <table id="voucher_submited_table1" class="table table-hover table-striped">
                </table>
            </div>
            <div class="tab-pane" id="b">
                <!--逾期还款表格-->
                <table id="voucher_submited_table2" class="table table-hover table-striped">
                </table>
            </div>
            <div class="tab-pane" id="c">
                <!--迟还款表格-->
                <table id="voucher_submited_table3" class="table table-hover table-striped">
                </table>
            </div>
            <div class="tab-pane" id="d">
                <!--提前还款表格-->
                <table id="voucher_submited_table4" class="table table-hover table-striped">
                </table>
            </div>
            <div class="tab-pane" id="e">
                <!--准时还款表格-->
                <table id="voucher_submited_table5" class="table table-hover table-striped">
                </table>
            </div>
        </div>
    </div>
    <br><br><br>

</div>
</body>
<script>
    $(function () {
        var userId = ParamUtil.getQueryString("userId");
        var walletType = ParamUtil.getQueryString("walletType");
        var resp = AjaxUtil.isLogin();
        if (!resp) return;
        var module = 'borrowing_record';
        var query = [];
        var toolbar = {
            default: [true, false, false, false],// back;add;edit;remove
            dialog: [60, 2, 9],//对话框参数:模态框宽度(百分比);表单标题宽度;表单输入框宽度
            extra: []
        };
        var formElement = [];

        var url = '/admin/borrowing_record/credit_file_detail?userId=' + userId + '&borrowingType=' +walletType+ '&repayStatus=1' + '&token=' + BaseConfig.token

        var bootstrapTable1 = {
            url: url,
            columns: [{
                radio: true
            }, {
                field: 'borrowingOrderNo',
                title: '借款单号',
                align: 'center'
            }, {
                field: 'nper',
                title: '期数',
                align: 'center'
            }]
        };
        // 已通过表格
        var bootstrapTable2 = {
            url: '/admin/borrowing_record/credit_file_detail?userId=' + userId+ '&borrowingType=' +walletType + '&repayStatus=2' + '&token=' + BaseConfig.token,
            columns: bootstrapTable1.columns
        }
        var bootstrapTable3 = {
            url: '/admin/borrowing_record/credit_file_detail?userId=' + userId+ '&borrowingType=' +walletType + '&repayStatus=3' + '&token=' + BaseConfig.token,
            columns: bootstrapTable1.columns
        }
        var bootstrapTable4 = {
            url: '/admin/borrowing_record/credit_file_detail?userId=' + userId + '&borrowingType=' +walletType+ '&repayStatus=4' + '&token=' + BaseConfig.token,
            columns: bootstrapTable1.columns
        }
        var bootstrapTable5 = {
            url: '/admin/borrowing_record/credit_file_detail?userId=' + userId + '&borrowingType=' +walletType+ '&repayStatus=5' + '&token=' + BaseConfig.token,
            columns: bootstrapTable1.columns
        }
        createBootstrapTable('#voucher_submited_table1', bootstrapTable1, null,'client');

        // 选项卡切换赋值
        $("#voucher_submited_tab li").click(function () {
            $("#voucher_submited_tab").attr("idx", $(this).attr('idx'));
            if ($(this).attr('idx') == 0) {
                createBootstrapTable('#voucher_submited_table1', bootstrapTable1, null,'client');
            }else  if ($(this).attr('idx') == 1){
                createBootstrapTable('#voucher_submited_table2', bootstrapTable2, null,'client');
                // select_item('api/supplier/voucher/select_item', 'type=refuseSign');
            }else  if ($(this).attr('idx') == 2){
                createBootstrapTable('#voucher_submited_table3', bootstrapTable3, null,'client');
                // select_item('api/supplier/voucher/select_item', 'type=refuseSign');
            }else  if ($(this).attr('idx') == 3){
                createBootstrapTable('#voucher_submited_table4', bootstrapTable4, null,'client');
                // select_item('api/supplier/voucher/select_item', 'type=refuseSign');
            }else  if ($(this).attr('idx') == 4){
                createBootstrapTable('#voucher_submited_table5', bootstrapTable5, null,'client');
                // select_item('api/supplier/voucher/select_item', 'type=refuseSign');
            }
        });
    });




    createBootstrapTable = function (tableId, bootstrapTable, queryForm, pagination) {
        if (!pagination) {
            pagination = 'server';
        }
        $(tableId).bootstrapTable({
            url: bootstrapTable.url + '&token=' + BaseConfig.token,
            responseHandler: function (resp) {
                resp = AjaxUtil.preDeal(resp);
                if (resp) {
                    return resp.obj;
                } else {
                    return [];
                }
            }
            ,
            method: 'get', // 请求方式（*）
            silent: true,
            striped:
                true, // 是否显示行间隔色,默认为false
            cache:
                false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination:
                true, // 是否显示分页（*）
            sidePagination: pagination,// 分页方式：client客户端分页，server服务端分页（*）
            queryParams: function queryParams(params) {
                var param = {
                    size: params.limit > 0 ? params.limit : 10,   //每页多少条数据
                    offset: params.offset >= 0 ? params.offset : 0, // 页码
                    page: params.offset / params.limit,
                };
                var formJson = $('#' + queryForm).serializeJSON();
                for (var key in formJson) {
                    param[key] = formJson[key];
                }
                return param;
            },
            pageNumber:
                1, // 初始化加载第一页，默认第一页
            pageSize:
                10, // 每页的记录行数（*）
            pageList:
                [10, 25, 50, 100], // 可供选择的每页的行数（*）
            search:
                false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端
            showColumns:
                true, // 是否显示内容列下拉框
            showRefresh:
                true, // 是否显示刷新按钮
            clickToSelect:
                true, // 是否启用点击选中行
            smartDisplay:
                true, // 智能显示分页按钮
            columns: bootstrapTable.columns,
            onClickRow: bootstrapTable.onClickRow
        })
    }
</script>
</html>